<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar>
            <template #left>
                <span class="iconfont iconnew"></span>
            </template>
            <template #title>
                <div class="search-box" @click="$router.push('/search')">
                    <van-icon name="search" />
                    <span>搜索商品</span>
                </div>
            </template>
            <template #right>
                <van-icon name="manager-o" size="22" @click="$router.push('/personal')" />
            </template>
        </van-nav-bar>
        <!-- 导航- 栏目列表 -->
        <!-- v-model="curIndex-设置栏目选中效果 -->
        <van-tabs v-model="curIndex" @change="tabChangeFn" @click.native="toCategory" >
            <van-tab v-for="item in categoryList" 
            :title="item.name" :key="item.id">
            <!-- 
                van-pull-refresh 下拉刷新组件
                isLoading: 表示是否加载 完成，false表示加载完成，true表示加载中
                refresh：表示下拉刷新的时候触发的事件，我们就可以在这个事件处理函数中实现刷新功能
             -->
            <van-pull-refresh v-model="isLoading" 
            @refresh="onRefresh">
                <!-- 
                van-list：上拉加载组件
                v-model: 控制数据是否加载完成，false表示加载完成 true加载中
                finished：表示是否全部数据加载完成，true表示加载完成，false表示未加载完
                load: 上拉加载时触发的事件，那么我就可以在这个事件处理函数中实现加载更多数据
                immediate-check: false表示关闭 加载页面的时候触发load事件（但是不能绝对关闭，某些情况下还是会触发）
                 -->
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="我是有底线的~"
                    @load="onLoad"
                    :immediate-check="false">
                    <!-- 新闻列表
                    默认情况下自定义组件不能绑定原生事件
                    如何解决呢？答：vue提供了一个修饰符给我们使用，使得我们可以在
                    自定义组件上直接绑定原生的事件，这个修饰符就是.native

                     -->
                    <newsItem v-for="item in newsList" 
                :key="item.id" :post="item" @click.native="toDetail(item.id)"></newsItem>
                </van-list>
            </van-pull-refresh>
            <!-- 栏目列表右边加号 -->
            <!-- <van-icon name="plus" @click="$router.push('/category')" /> -->
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import newsItem from "@/components/newsItem.vue"
import { category, post_news } from "@/api/news.js"
export default {
    components: {
        newsItem
    },
    data(){
        return {
            categoryList: [], // 栏目列表
            // 表示栏目下标值，1表示默认获取“头条”的下标值
            // 因为首页默认就是要获取“头条”的新闻列表数据
            curIndex: this.$route.meta.curIndex, 
            newsList: [], // 新闻列表
            isLoading: false,
            pageIndex: 1,   // 当前页码，默认请求第一页的数据
            pageSize: 8,    // 数据的条数
            loading: false,
            finished: false
        }
    },
    created(){
        // console.log(this.$route);
        // 判断栏目列表 是否有缓存数据，如果有则使用缓存的数据，
        // 如果没有，则使用从接口中获取到的数据
        let categorys = JSON.parse(localStorage.getItem("categoryList")) || []
        let defaultCategory = JSON.parse(localStorage.getItem("defaultCategory"))||[]
        if(defaultCategory.length>0){
            this.categoryList = [...defaultCategory, ...categorys]
            // id来获取，又因为只有在这里栏目id才存在
            this.getNews()
        }else{
            category().then(res=>{
                // console.log(37, res);
                this.categoryList = res.data.data
                // 调用获取 文章列表的接口，因为文章列表需要根据栏目
                // id来获取，又因为只有在这里栏目id才存在
                this.getNews()
            })
        }


    },
    methods: {
        // 跳转到频道管理页面
        toCategory(event){
            // console.log(105,event.target);
            // 注意：这里不能使用 van-tabs__wrap--scrollable 类名来判断
            // 因为这个类名是栏目比较多的时候才存在的
            if(event.target.className.indexOf("van-tabs__wrap") != -1){
                this.$router.push("/category")
            }
        },
        // 跳转到详情页面
        toDetail(id){
            this.$router.push({
                path: "/articleDetail",
                query: { id }
            })
        },
        // 点击栏目时触发的函数
        tabChangeFn(name, title){
            // console.log(name,title);
            // name: 指的是栏目对应的下标值
            // title: 指的是栏目对应的标题
            // 因为tas标签中已经用v-model双向绑定了curIndex，因此name的值会自动赋值给curIndex
            // this.curIndex = name; 
            // 因为点击栏目切换显示不同数据之前，也需要清空数组和finished等等数据，这些代码我都在下拉刷新函数中存在了，
            // 所以最终，我们只需要调用下拉刷新的函数即可。
            // 将当前的栏目的下标值保存到路由对象中元信息中
            this.$route.meta.curIndex = this.curIndex
            this.onRefresh()
        },
        // 上拉加载时触发的函数
        onLoad(){
            // console.log(85,"上拉加载");
            // 当第一页的数据还没有请求回来的时候，阻止继续请求下一页的数据
            if(this.newsList.length === 0){ return }
            this.pageIndex++
            this.getNews()
        },
        // 下拉刷新
        onRefresh(){
            // console.log(95,"下拉刷新");
            // 重置相关的变量
            this.pageIndex = 1; // 因为上拉加载的会改变pageIndex的值，所以为了重新获取第一页的数据，需要重置
            this.newsList = []; // 因为数组是累加在一起，因此导致报错，但其实我们刷新数据是不需要累加数据的，因此要重置
            // 因为上拉加载有可能会导致finished设置会true，因为为了能够实现刷新页面后还能够继续实现上拉加载功能，因此需要重置
            this.finished = false; 
            // console.log(66,"下拉刷新");
            this.getNews()
        },
        // 获取文章列表数据，封装在getNews函数中调用接口，是为了能够复用这个里面的代码。
        getNews(){
            post_news({
                category: this.categoryList[this.curIndex].id,
                pageIndex: this.pageIndex, 
                pageSize: this.pageSize 
            }).then(res=>{
                // console.log(52, res);
                // this.newsList = res.data.data
                // 下拉加载更多数据，需要把原来的数据和下一页的数据合并在一起
                this.newsList = [...this.newsList, ...res.data.data]
                // 表示下拉刷新数据加载完成
                this.isLoading = false
                // 上拉加载完成后 需要把loading设置为false，表示加载完成
                this.loading = false
                // 当所有数据都加载完成后，需要把finished设置为true，表示加载完成
                // 如何判断所有数据已经加载完了呢？注：后端会返回total这个字段给我们，这个字段表示文章总数量。
                // 答：方法一：当this.newsList数组长度等于res.data.total的时候，表示数据已经加载完成了。
                // 方法二：当接口返回给我们的数据量小于this.pageSize的值的时候，说明数据库中已经没有更多数据
                if(res.data.data.length < this.pageSize){
                    this.finished = true;
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar{
    background: red;
    .iconnew{
        font-size: 50px;
        color: #fff;
    }
    .van-nav-bar__title{
        width: 60%;
        .search-box{
            width: 100%;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: 20px;
            background: rgba(255,255,255, 0.3);
            span{
                color: #fff;
            }
        }
    }

    .van-icon{
        color: #fff;
    }
}
/deep/.van-tabs{
    .van-tabs__wrap {
        position: relative;
        padding-right: 44px;
        // & 表示after的父级标签
        &::after{
            content: "+";
            position: absolute;
            top: 0;
            right: 0;
            width: 44px;
            height: 44px;
            line-height: 40px;
            text-align: center;
            background: #fff;
            font-size: 36px;
            font-weight: bold;
        }
    }
}
</style>